<template>
	<view class="page_content">
		<z-paging :show-loading-more-no-more-view="false" :safe-area-inset-bottom="true" :delay="500" :default-page-size="20" bgColor="#FFF" ref="paging" v-model="list" @query="queryList">
			<template #empty>
				<view class="nodata">
					<view class="img"></view>
					<view class="text">暂无数据</view>
				</view>
			</template>
			<view class="item_content" v-for="(item,index) in list" :key="index">
				<view class="log_card_list_info_name">{{item.operateContent}}</view>
				<view class="log_card_list_info_value">{{formatInfo(item)}}</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
				],
				pageSize:10
			}
		},
		methods: {
			formatInfo(item){
				return '操作人:' + item.userName + ' | ' + item.opTime;
			},
			queryList(pageNo, pageSize) {
				let params = {
					componentGoodsId:this.$Route.query.id || '',
					pageSize:pageSize,
					pageNum:pageNo
				}
				
				let self = this;
				self.$progressHud.showLoading();
				self.$NetApi.getMethod('/loyu-api/app/component/operation-log',params).then(ok => {
						self.$progressHud.hideLoading();
						self.$refs.paging.complete(ok.rows);
				}, fail => {
					self.$refs.paging.complete(false);
					self.$progressHud.hideLoading();
					self.$progressHud.showToast(fail.errMsg || '网络错误');
				})
			},
		}
	}
</script>

<style>
	.page_content {
		width: 100%;
		min-height: 100%;
		background-color: #FFF;
	}
	.item_content{
		width: calc(100%);
		padding: 24rpx 32rpx;
		border-bottom: 1px solid #e5e5e5;
		
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		row-gap: 10rpx;
	}
	.log_card_list_info_name{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #000000;
	}
	.log_card_list_info_value{
		font-family: Roboto;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 32rpx;
		letter-spacing: normal;
		color: #6B7280;
	}
</style>
